import React, { Component } from 'react'
// 多层列表渲染
// 多次嵌套map的使用
export default class App extends Component {
  state = {
    list: [
      {
        brand: '奥迪',
        items: ['A6', 'Q7']
      },
      {
        brand: '宝马',
        items: ['X5', 'X6']
      }
    ]
    
  }
  render() {
    return (
      <ul>
        {
          this.state.list.map((item, index) => {
            return (
            <li key = { index }>
                { item.brand }
                {/* 二次封装 */}
                {
                  item.items.map((itm, idx) => {
                    return (
                      <p key = { idx }>{ itm }</p>
                    )
                  })
                }
              </li>
            )
          })
        }
      </ul>
    )
  }
}
